<template>
  <div class="RecommendBanner" v-if="banners">
    <van-swipe
      :autoplay="5000"
      style="border-radius: 10px; width: 360px; height: 202px"
      @change="onChange"
    >
      <van-swipe-item
        v-for="(banner, index) in banners"
        :key="index"
        style="width: 360px; height: 202px"
      >
        <van-image
          width="auto"
          height="202px"
          lazy-load
          :src="banner.model.cover"
        />
        <div class="title" v-if="banner.model.title">
          {{ banner.model.title }}
        </div>
      </van-swipe-item>
      <template #indicator>
        <div class="custom-indicator">
          <span>{{ current + 1 }}</span
          >&nbsp;/&nbsp;{{ banners.length }}
        </div>
      </template>
    </van-swipe>
  </div>
</template>

<script>
export default {
  props: ["banners"],
  data() {
    return {
      current: 0,
    };
  },
  methods: {
    onChange(index) {
      this.current = index;
    },
  },
  filters: {
    time: function (text) {
      let minute =
        Math.floor(text / 60) < 10
          ? `0${Math.floor(text / 60)}`
          : Math.floor(text / 60);
      let second = text % 60 < 10 ? `0${text % 60}` : text % 60;
      return `${minute}'${second}''`;
    },
    formatter: function (value) {
      if (value >= 1000 && value < 10000) {
        value = (value / 1000).toFixed(1) + "k";
      }
      if (value >= 10000 && value < 10000000) {
        value = (value / 10000).toFixed(1) + "w";
      }
      return value;
    },
  },
};
</script>

<style lang="scss" scoped>
.RecommendBanner {
  margin-bottom: 8px;

  .title {
    font-size: 16px;
    font-weight: bold;
    color: white;
    position: absolute;
    left: 20px;
    bottom: 10px;
  }

  .custom-indicator {
    position: absolute;
    right: 10px;
    bottom: 10px;
    font-size: 14px;
    color: white;

    span {
      font-size: 20px;
      font-weight: bold;
    }
  }
}
</style>
